<!doctype html>
<html lang="en" style="height:100%">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body style="height:100%;margin:0;">

<div id="test" style="width:795px;height:355px;margin:100px auto 0;"></div>
<!--<div id="test" style="width:100%;height:100%;"></div>-->

<script src="http://gallery.echartsjs.com/dep/echarts/3.8.0/echarts.min.js"></script>
<script>
  // 各节点、直角的位置
  const data = [
    {
      name: 'bg',
      value: [60, 177.5],
      symbol: 'image://../assets/flow/sjy-bg.png',
      symbolSize: [120, 222],
      label: {
        normal: {show: false}
      }
    },
    {
      name: '数据源',
      value: [70, 160],
      symbol: 'image://../assets/flow/icon-sjy.png',
      symbolSize: [41, 48]
    },
    {
      name: '数据源1',
      value: [135, 160]
    },
    {
      name: '原始库1',
      value: [135, 250]
    },
    {
      name: '原始库',
      value: [200, 250],
      symbol: 'image://../assets/flow/icon-ysk.png',
      symbolSize: [46, 51],
      label: {
        normal: {
          position: 'top'
        }
      }
    },
    {
      name: '预处理库',
      value: [295, 250],
      symbol: 'image://../assets/flow/icon-yclk.png',
      symbolSize: [48, 49],
      label: {
        normal: {
          position: 'top'
        }
      }
    },
    {
      name: '标准库',
      value: [390, 250],
      symbol: 'image://../assets/flow/icon-bzk.png',
      symbolSize: [38, 44],
      label: {
        normal: {
          position: 'top'
        }
      }
    },
    {
      name: '标准库1',
      value: [475, 250]
    },
    {
      name: '流式数据库1',
      value: [135, 45]
    },
    {
      name: '流式数据库',
      value: [300, 45],
      symbol: 'image://../assets/flow/icon-lssjk.png',
      symbolSize: [41, 52],
      label: {
        normal: {
          position: 'top'
        }
      }
    },
    {
      name: '智慧搜索1',
      value: [475, 330]
    },
    {
      name: '智慧搜索',
      value: [680, 330],
      symbol: 'image://../assets/flow/icon-zhss.png',
      symbolSize: [43, 44],
      label: {
        normal: {
          position: 'right'
        }
      }
    },
    {
      name: '标识库1',
      value: [475, 290]
    },
    {
      name: '标识库2',
      value: [615, 290]
    },
    {
      name: '标识库',
      value: [550, 290],
      symbol: 'image://../assets/flow/icon-bsk.png',
      symbolSize: [40, 40]
    },
    {
      name: '主题库1',
      value: [475, 205]
    },
    {
      name: '主题库2',
      value: [615, 205]
    },
    {
      name: '主题库',
      value: [550, 205],
      symbol: 'image://../assets/flow/icon-ztk.png',
      symbolSize: [43, 36]
    },
    {
      name: '关系库1',
      value: [475, 125]
    },
    {
      name: '关系库',
      value: [550, 125],
      symbol: 'image://../assets/flow/icon-gxk.png',
      symbolSize: [40, 45]
    },
    {
      name: '关系分析',
      value: [680, 125],
      symbol: 'image://../assets/flow/icon-gxfx.png',
      symbolSize: [48, 49]
    },
    {
      name: '轨迹库1',
      value: [475, 55]
    },
    {
      name: '轨迹库2',
      value: [555, 55]
    },
    {
      name: '轨迹库',
      value: [555, 45],
      symbol: 'image://../assets/flow/icon-gjk.png',
      symbolSize: [48, 40]
    },
    {
      name: '轨迹分析',
      value: [680, 45],
      symbol: 'image://../assets/flow/icon-gjfx.png',
      symbolSize: [52, 40],
      label: {
        normal: {
          position: 'right'
        }
      }
    },
    {
      name: '战法市场',
      value: [680, 250],
      symbol: 'image://../assets/flow/icon-zfsc.png',
      symbolSize: [47, 39],
      label: {
        normal: {
          position: 'right'
        }
      }
    },
    {
      name: '战法市场1',
      value: [615, 250]
    }
  ]

  // 线条连接
  const links = [
    {
      source: '数据源',
      target: '数据源1'
    },
    {
      source: '数据源1',
      target: '原始库1'
    },
    {
      source: '原始库1',
      target: '原始库'
    },
    {
      source: '原始库',
      target: '预处理库'
    },
    {
      source: '预处理库',
      target: '标准库'
    },
    {
      source: '标准库',
      target: '标准库1'
    },
    {
      source: '数据源1',
      target: '流式数据库1'
    },
    {
      source: '流式数据库1',
      target: '流式数据库'
    },
    {
      source: '流式数据库',
      target: '轨迹库'
    },
    {
      source: '标准库1',
      target: '智慧搜索1'
    },
    {
      source: '标准库1',
      target: '轨迹库1'
    },
    {
      source: '轨迹库1',
      target: '轨迹库2'
    },
    {
      source: '智慧搜索1',
      target: '智慧搜索'
    },
    {
      source: '标识库1',
      target: '标识库'
    },
    {
      source: '标识库',
      target: '标识库2'
    },
    {
      source: '主题库1',
      target: '主题库'
    },
    {
      source: '主题库',
      target: '主题库2'
    },
    {
      source: '关系库1',
      target: '关系库'
    },
    {
      source: '关系库',
      target: '关系分析'
    },
    {
      source: '轨迹库',
      target: '轨迹分析'
    },
    {
      source: '战法市场1',
      target: '战法市场'
    },
    {
      source: '标识库2',
      target: '战法市场1'
    },
    {
      source: '主题库2',
      target: '战法市场1'
    }
  ]

  // 如需按照直角流动必须要经过设置直角的节点
  const coordData = [
    // 数据源-流式数据库-轨迹分析
    {
      coords: [
        [70, 160],
        [135, 160],
        [135, 45],
        [680, 45]
      ]
    },
    {
      coords: [
        [70, 160],
        [135, 160],
        [135, 250],
        [475, 250],
        [475, 330],
        [680, 330]
      ]
    },
    // 数据源-标准库-标识库-战法市场
    {
      coords: [
        [70, 160],
        [135, 160],
        [135, 250],
        [475, 250],
        [475, 290],
        [615, 290],
        [615, 290],
        [615, 250],
        [680, 250]
      ]
    },
    // 数据源-标准库-主题库-战法市场
    {
      coords: [
        [70, 160],
        [135, 160],
        [135, 250],
        [475, 250],
        [475, 205],
        [615, 205],
        [615, 250],
        [680, 250]
      ]
    },
    // 数据源-标准库-关系库-关系分析
    {
      coords: [
        [70, 160],
        [135, 160],
        [135, 250],
        [475, 250],
        [475, 125],
        [680, 125]
      ]
    },
    // 数据源-标准库-轨迹库-轨迹分析
    {
      coords: [
        [70, 160],
        [135, 160],
        [135, 250],
        [475, 250],
        [475, 55],
        [475, 55],
        [555, 55],
        [555, 45],
        [680, 45]
      ]
    }
  ]

  function init() {
    const myChart = echarts.init(document.getElementById('test'))

    const options = {
      grid: {
        top: 0,
        left: 0,
        right: 0,
        bottom: 0
      },
      xAxis: {
        silent: true,
        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        max: 780,
        min: 0
      },
      yAxis: {
        silent: true,
        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        max: 360,
        min: 0
      },
      series: [
        // 节点和线条层
        {
          zlevel: 2,
          type: 'graph',
          layout: 'force',
          coordinateSystem: 'cartesian2d',
          symbolSize: 0,
          data: data,
          links: links,
          label: {
            normal: {
              show: true,
              position: 'bottom',
              textStyle: {
                fontSize: 18,
                color: '#fefefe'
              }
            }
          },
          lineStyle: {
            normal: {
              type: 'dotted',
              width: 3,
              color: '#1e7ed7',
              opacity: 1,
              curveness: 0
            }
          }
        },
        // 流动箭头层
        {
          coordinateSystem: 'cartesian2d',
          type: 'lines',
          polyline: true,
          zlevel: 1,
          effect: {
            show: true,
            color: '#0AE94C',
            period: 10,
            trailLength: 0,
            symbolSize: [13, 41],
            symbol: 'image://../assets/flow/icon-light.png',
            loop: true
          },
          lineStyle: {
            normal: {
              type: 'dotted',
              width: 2,
              color: '#1e7ed7',
              opacity: 1,
              curveness: 0
            }
          },
          data: coordData
        }
      ]
    };

    myChart.setOption(options)
  }

  init()
</script>
</body>
</html>
